<template>
    <div style="margin-left:30px;" >
        <el-form :model="saveForm" style="width: 60%">
            <el-form-item label="事件名称:">
                <el-input v-model="saveForm.groupEventName" autocomplete="off" style="width: 40%"></el-input>
            </el-form-item>
            <el-form-item label="事件时间:">
                <el-time-picker  style="width: 40%"
                    v-model="saveForm.triggerTime"
                    :picker-options="{
                              selectableRange: '8:00:00 - 21:30:00'
                            }"
                    placeholder="请选择时间">
                </el-time-picker>
            </el-form-item>
            <el-form-item label="事件内容:">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="saveForm.groupEventMessage" style="width: 40%">
                </el-input>
            </el-form-item>
            <el-form-item label="选择群聊:">
                <el-button @click="addClientGroup()"> + 添加群聊</el-button>
                <el-tag v-if="clientGroup.clientGroupName"> {{ clientGroup.clientGroupName }}</el-tag>
            </el-form-item>
            <el-form-item label="事件提醒：">
                <el-switch v-model="saveForm.eventAlert" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </el-form-item>
            <el-card v-if="saveForm.eventAlert == true">
                在事件时间到达前
                <el-input type="text" v-model="saveForm.alertTime" style="width: 80px"></el-input>
                分钟前发送提醒至群主
            </el-card>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-left: 150px;">
            <el-button @click="back">取 消</el-button>
            <el-button type="primary" @click="saveEvent">确 定</el-button>
        </div>
        <!-- 添加群聊 -->
        <el-dialog title='添加群聊' :visible.sync="addClientGroupVisible" width="40%" @click="close">
            <div style="padding: 0px 0px 0px 30px;">
                <ListSelect @getData="getData" :listFields="listGroupFields" :dataSource="listGroup"/>
                <div class="button-center"style="padding: 10px 10px;">
                    <el-button size="mini" @click="addClientGroupVisible = false">取消</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import ListSelect from "@/components/list_select/list_select"
    // 注册组件

    export default {
        name: "group_event",
        data() {
            return {
                saveForm: {},
                clientGroup:{},
                addClientGroupVisible: false,
                listGroupFields:{
                    clientGroupName: '群聊名称',
                    empName: '群主名称'
                },
                listGroup: {},
            }
        },

        components: {
            ListSelect
        },

        methods: {
            back() {
                this.$emit("currentHandler", "list")
            },

            getData(data) {
                this.clientGroup = data
                this.addClientGroupVisible = false
            },
            saveEvent() {
                this.saveForm.clientGroupId = this.clientGroup.clientGroupId
                let that = this
                if (this.saveForm.eventAlert == true) {
                    that.saveForm.eventAlert = 'true'
                } else {
                    that.saveForm.eventAlert = 'false'
                }
                this.$request("/api/groupEvent/addEvent/1_0", this.saveForm, "POST").then((data) => {
                    if (data.data == 1) {
                        this.$message({
                            message: "操作成功 ！",
                            type: 'success'
                        });
                    }
                    that.saveForm = {...initData}
                    that.dialogFormVisible = false
                })
                this.back()
            },
            addClientGroup(){
                let that = this
                that.title = '添加群聊'
                that.$request("/api/custGroup/selectGroup/1_0", "", "POST").then((data) => {
                    that.listGroup = [...data.rows]
                    that.addClientGroupVisible = true
                })
            },
        }
    }
</script>

<style scoped>

</style>
